<!DOCTYPE html>
<meta charset="utf-8">
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://hajimehoshi.github.io/ebiten/images/examples/masking.png">
<meta name="description" content="Ebiten example - masking">
<link rel="shortcut icon" href="../favicon.png" type="image/png" >
<link rel="icon" href="../favicon.png" type="image/png" >
<title>Ebiten example - masking</title>

<link rel="stylesheet" href="../stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="../stylesheets/highlight-github.css">
<link rel="stylesheet" href="../stylesheets/ebiten.css">
<script src="../scripts/googleanalytics.js"></script>

<nav class="navbar"><div class="container">
  <nav class="d-flex flex-row" style="width: 100%;">
    <div class="nav mr-auto"><a class="navbar-brand" href="../"><img src="../images/logo_white.svg" alt="EBITEN"></a></div>
    <ul class="nav">
      <li class="nav-item"><a class="nav-link" href="https://github.com/hajimehoshi/ebiten">GitHub</a></li>
      <li class="nav-item"><a class="nav-link" href="https://godoc.org/github.com/hajimehoshi/ebiten">GoDoc</a></li>
      <li class="nav-item"><a class="nav-link" href="https://github.com/hajimehoshi/ebiten/wiki">Wiki</a>
      <li class="nav-item"><a class="nav-link" href="https://ebiten-playground.github.io/">Playground</a>
    </ul>
  </nav>
</div></nav>

<main><div class="container">

  <h2>Ebiten example - masking</h2>
  <iframe src="masking.content.html" width="640" height="480"></iframe>
  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example

package main

import (
        &#34;image&#34;
        &#34;image/color&#34;
        _ &#34;image/jpeg&#34;
        &#34;log&#34;
        &#34;math&#34;

        &#34;github.com/hajimehoshi/ebiten&#34;
        &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
)

const (
        screenWidth  = 320
        screenHeight = 240
)

var (
        bgImage        *ebiten.Image
        fgImage        *ebiten.Image
        maskedFgImage  *ebiten.Image
        spotLightImage *ebiten.Image
        spotLightX     = 0
        spotLightY     = 0
        spotLightVX    = 1
        spotLightVY    = 1
)

func init() {
        var err error
        bgImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/gophers.jpg&#34;, ebiten.FilterDefault)
        if err != nil {
                log.Fatal(err)
        }

        fgImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/fiveyears.jpg&#34;, ebiten.FilterDefault)
        if err != nil {
                log.Fatal(err)
        }

        maskedFgImage, _ = ebiten.NewImage(screenWidth, screenHeight, ebiten.FilterDefault)

        // Initialize the spot light image.
        const r = 64
        alphas := image.Point{r * 2, r * 2}
        a := image.NewAlpha(image.Rectangle{image.ZP, alphas})
        for j := 0; j &lt; alphas.Y; j&#43;&#43; {
                for i := 0; i &lt; alphas.X; i&#43;&#43; {
                        // d is the distance between (i, j) and the (circle) center.
                        d := math.Sqrt(float64((i-r)*(i-r) &#43; (j-r)*(j-r)))
                        // Alphas around the center are 0 and values outside of the circle are 0xff.
                        b := uint8(max(0, min(0xff, int(3*d*0xff/r)-2*0xff)))
                        a.SetAlpha(i, j, color.Alpha{b})
                }
        }
        spotLightImage, _ = ebiten.NewImageFromImage(a, ebiten.FilterDefault)
}

func update(screen *ebiten.Image) error {
        spotLightX &#43;= spotLightVX
        spotLightY &#43;= spotLightVY
        if spotLightX &lt; 0 {
                spotLightX = -spotLightX
                spotLightVX = -spotLightVX
        }
        if spotLightY &lt; 0 {
                spotLightY = -spotLightY
                spotLightVY = -spotLightVY
        }
        w, h := spotLightImage.Size()
        maxX, maxY := screenWidth-w, screenHeight-h
        if maxX &lt; spotLightX {
                spotLightX = -spotLightX &#43; 2*maxX
                spotLightVX = -spotLightVX
        }
        if maxY &lt; spotLightY {
                spotLightY = -spotLightY &#43; 2*maxY
                spotLightVY = -spotLightVY
        }

        if ebiten.IsRunningSlowly() {
                return nil
        }

        // Reset the maskedFgImage.
        maskedFgImage.Fill(color.White)
        op := &amp;ebiten.DrawImageOptions{}
        op.CompositeMode = ebiten.CompositeModeCopy
        op.GeoM.Translate(float64(spotLightX), float64(spotLightY))
        maskedFgImage.DrawImage(spotLightImage, op)

        // Use &#39;source-in&#39; composite mode so that the source image (fgImage) is used but the alpha
        // is determined by the destination image (maskedFgImage).
        //
        // The result image is the source image with the destination alpha. In maskedFgImage, alpha
        // values in the hole is 0 and alpha values in other places are 0xff. As a result, the
        // maskedFgImage draws the source image with a hole that shape is spotLightImage. Note that
        // RGB values in the destination image are ignored.
        //
        // See also https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin.
        op = &amp;ebiten.DrawImageOptions{}
        op.CompositeMode = ebiten.CompositeModeSourceIn
        maskedFgImage.DrawImage(fgImage, op)

        screen.Fill(color.RGBA{0x00, 0x00, 0x80, 0xff})
        screen.DrawImage(bgImage, &amp;ebiten.DrawImageOptions{})
        screen.DrawImage(maskedFgImage, &amp;ebiten.DrawImageOptions{})

        return nil
}

func max(a, b int) int {
        if a &lt; b {
                return b
        }
        return a
}

func min(a, b int) int {
        if a &lt; b {
                return a
        }
        return b
}

func main() {
        if err := ebiten.Run(update, screenWidth, screenHeight, 2, &#34;Masking (Ebiten Demo)&#34;); err != nil {
                log.Fatal(err)
        }
}
</code></pre></div>

</div></main>

<footer><div class="container">
  <p>© 2013 Hajime Hoshi</p>
  <p>Code is licensed under <a href="https://github.com/hajimehoshi/ebiten/blob/master/LICENSE">the Apache License 2.0</a>.</p>
  <p>The content of this page is licensed under <a href="https://creativecommons.org/licenses/by/4.0/">the Creative Commons Attribution 4.0 License</a>.</p>
</div></footer>

<script src="../scripts/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
